/**
 * @file 愉快的日常
 * @author Cicime
 * @createtime 2016年4月29日16:04:27
 *
 */

/* main */
(function () {
  Cardbox(460,666,'canvas','img/img1.jpg','kuang','img/kuang.png','ico','img/ic1.png');
})();

function Cardbox(width,height,canvas,img,kuang,kuaimg,ico,icimg){
  var canvas = document.getElementById(canvas),
      context = canvas.getContext("2d"),
      kuan = document.getElementById(kuang),
      contkuan = kuan.getContext("2d"),
      ic = document.getElementById(ico),
      contic = ic.getContext("2d");

  window.addEventListener('load',function(){
    canvas.width = width;
    canvas.height = height;
    kuan.width = width;
    kuan.height = height;
    ic.width = width;
    ic.height = height;

    imgload(context,img);
    kuanload(contkuan,kuaimg);
    iocload(contic,icimg);

    kuanload.zIndex = 5;
    iocload.zIndex = 10;
  });

  function imgload(con,im){
    var image = new Image();
    image.src = im;
    image.addEventListener('load',function(){
      con.drawImage(image,0,0,width,height);
    });
  }
  function kuanload(con,im){
    var image = new Image();
    image.src = im;
    image.addEventListener('load',function(){
      con.drawImage(image,0,0,width,height);
      context.drawImage(kuan,0,0,width,height);
    });
  }
  function iocload(con,im){
    var image = new Image();
    image.src = im;
    image.addEventListener('load',function(){
      con.drawImage(image,75,70,92,92);
      context.drawImage(ic,0,0,width,height);
    });
  }

  function mod(im){
    var image = new Image();
    image.src = im;
    image.addEventListener('load',function(){
      context.clearRect(0,0,canvas.width,canvas.height);
      context.drawImage(image,0,0,width,height);
      context.drawImage(kuan,0,0,width,height);
      context.drawImage(ic,0,0,width,height);
    });
  }

  var bg = document.getElementsByClassName('bg');
  for(var i=0; i<bg.length; i++){
    bg[i].addEventListener('click',function(){
      var img = this.style.backgroundImage,
        imgsrc = img.match(/(img\/img\d\.jpg)/)[0];
      mod(imgsrc);
    });
  }
}
